// rec
import React, { useState, useEffect } from "react";
import { Button, Form, Input, Spin, Card, message, Radio } from "antd";
import { MailOutlined, LockOutlined } from "@ant-design/icons";
import { useNavigate,Link } from "react-router-dom";
import "./login.css";
import { _login } from "../util/api";

function Login() {
  const [isShow, setIsShow] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  const navigate = useNavigate();

  useEffect(() => {}, []);

  const onFinish = (userData) => {
    setIsLoading(true);
    const user_type = userData.user_type
    const user_email= userData.user_email

    const isadmin = user_email.split('@')[0]

    const tempdata = {
      user_email: user_email,
      user_pwd: userData.user_pwd,
    };
    _login(tempdata)
      .then((res) => {
        if (res.status === 200 && res.data.code == 0) {
          setIsLoading(false);
          console.log(res);
          sessionStorage.setItem("token", JSON.stringify(res.data.data.token));
          message.success("登录成功", 1).then(() => {
            if (user_type == 0 && isadmin=='admin') {
              navigate("/admin/user");
            } else {
              navigate("/m/mgw1");
            }
          });
        } else {
          //登录失败
          setIsLoading(false);
          message.error("密码错误或用户不存在");
        }
      })
      .catch((e) => {
        console.log(e);
        setIsLoading(false);
        message.error("服务器错误");
      });
  };

  return (
    <div className="login-div">
      <Spin tip="Loading..." spinning={isLoading}>
        <Card
          title="蒙古文类文字检测系统"
          bordered={true}
          style={{ width: 400 }}
          extra={<Link to="/register">注册</Link>}
        >
          <Form
            name="normal_login"
            className="login-form"
            initialValues={{
              remember: true,
            }}
            onFinish={onFinish}
          >
            <Form.Item
              name="user_email"
              rules={[
                {
                  type: "email",
                  message: "此邮箱无效!",
                },
                {
                  required: true,
                  message: "请输入你的邮箱!",
                },
              ]}
            >
              <Input
                prefix={<MailOutlined className="site-form-item-icon" />}
                placeholder="邮箱"
                size="large"
              />
            </Form.Item>
            <Form.Item
              name="user_pwd"
              prefix={<LockOutlined className="site-form-item-icon" />}
              rules={[
                {
                  required: true,
                  message: "请输入密码!",
                },
              ]}
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                size="large"
                placeholder="密码"
              />
            </Form.Item>
            <Form.Item
              name="user_type"
              label="用户类型"
              rules={[
                {
                  required: true,
                  message: "请选择用户类型!",
                },
              ]}
            >
              <Radio.Group>
                <Radio value="0">管理员</Radio>
                <Radio value="1">普通用户</Radio>
              </Radio.Group>
            </Form.Item>
            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                className="login-form-button"
                block
                size="large"
              >
                登录
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </Spin>
    </div>
  );
}

export default Login;
